import React, { Component } from 'react'
// 1、导入styled-component
import styled from 'styled-components'
// 2、定义css样式  变成组件标签
const BgColor = styled.div`
  background-color: pink;
`
// 样式继承
const CopyColor = styled(BgColor)`
  /* 继承的属性 会被自身属性覆盖 */
  background-color: green;
  color: red;
  font-size: 26px;
`

// 属性传递
const Title = styled.p`
  /* 组件传递的props参数color作为颜色 */
  color: ${(props) => props.color};
`
const bgPink = (Cmp) => {
  return class withBg extends Component {
    render() {
      return (
        // <div style={{ background: 'pink' }}>
        <CopyColor>
          <Cmp></Cmp>
          <Title color="red">红色</Title>
          <Title color="yellow">黄色</Title>
          <Title color="blue">蓝色</Title>
        </CopyColor>
      )
    }
  }
}
export default bgPink
